import React from 'react'
import { View } from 'react-native'
import { Lt, Nav, Color, Dialog, Navigator, Jx } from "../_utils"
import { Net, NET_NR } from "../_net"
import { eApp, FieldProps, AppPorps, cHome } from "./_home"
import { GoodsList } from "./GoodsList"
import { SegProjector } from '../_util';
import { eField, eFieldTBTM } from './_efield';
import { TouchSearch } from './Homes';

// 从首页点击各个平台的图片进来的界面
function getFields(appIdx){
    const app = eApp.idxs[appIdx];
    if(app == eApp.TB || app == eApp.TM){
        return eFieldTBTM.map(v=>v.name);
    }
    return eField[app].map(v=>v.name);
}

export class Apps extends React.PureComponent{
    constructor(props){
        super(props);
        const {appIdx} = this.props.navigation.state.params;
        this.appIdx = appIdx;
        this.fieldIdx = 0;
        this.state = {
            fieldIdx : this.fieldIdx,
            fields:getFields(appIdx),
        }

        this.onSearch = this.onSearch.bind(this);
        this.onAppIdx = this.onAppIdx.bind(this);
        this.onFieidIdx = this.onFieidIdx.bind(this);
        this.onLoad = this.onLoad.bind(this);
    }
    static navigationOptions = { header: null, }

    // 搜索
    onSearch(){
        Navigator.push("History");
    }

    // 切换平台
    onAppIdx(appIdx){
        this.setState({
            fieldIdx:0,
            fields:getFields(appIdx),
        });
        this.appIdx = appIdx;
        this.fieldIdx = 0;
        if(this.goodslist){
            this.goodslist.setAppIdx(appIdx);
            this.goodslist.refresh();
        }
    }

    // 切换类目
    onFieidIdx(fieldIdx){
        this.setState({fieldIdx});
        this.fieldIdx = fieldIdx;
        this.goodslist && this.goodslist.refresh();
    }

    // 切换平台/类目 都会重新加载列表
    onLoad(params){
        const type = eApp.idxs[this.appIdx];
        let url = "Shop/Search";
        let obj = {
            ...cHome.getCatCid(type, this.fieldIdx, true),
            ...params.pagination,
        }
        if(type == eApp.TB || type==eApp.TM){
            url = "Shop/good";
            obj.type = (type==eApp.TB) ? 0 : 1;
        }else if(type == eApp.PDD){
            if(obj.opt){
                obj.type = type;
            }else{
                url = "Shop/pdd"
            }
        }else if(type == eApp.JD){
            url = "Shop/jd"
        }
        Net.request(url, obj, {params, NET_NR }).then(r=>{
            if(r.data){
                cHome.toFieldIdx(r.data.data, this.fieldIdx);
                params.add(r.data.data);
            }else{
                params.add()
            }
        });
    }

    render(){
        return <View style = {{flex:1}}>
            <Nav.StateBar /> 
            <View style={Nav.style}>
                <Nav.TouchBack/>
                <View style={{flexDirection:"row", alignSelf:"center", flex:1}}>
                    <TouchSearch onPress={this.onSearch} title={"搜索商品"}/>
                </View>
                <Nav.Touch/>
            </View>
            <SegProjector {...AppPorps}
                defaultIdx = {this.appIdx} 
                onChange={this.onAppIdx}
            />
            <SegProjector {...FieldProps}
                fields={this.state.fields} 
                activeIndex={this.state.fieldIdx} 
                onChange={this.onFieidIdx} 
            />
            <GoodsList
                ref={r=>this.goodslist=r}
                appIdx={this.appIdx}
                onLoad={this.onLoad}
            />
        </View>
    }
}
